<template>
  <div id="search">
    <div class="head-line">
      搜索 <span class="keyword">{{ keyword }}</span> 的结果
    </div>
    <NavBar :navs="navs" class="nav-bar" />
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
export default {
  name: "Search",
  components: {
    NavBar,
  },
  data() {
    return {
      keyword: "",
      // 导航栏数据
      navs: [
        {
          id: 0,
          label: "合集",
          type: "collections",
          url: "",
        },
        {
          id: 1,
          label: "艺术品",
          type: "arts",
          url: "",
        },
        {
          id: 2,
          label: "用户",
          type: "users",
          url: "",
        },
      ],
    };
  },
  watch: {
    "$route.query": {
      immediate:true,
      handler(newValue) {
        this.keyword = newValue.keyword;
        this.navs.forEach((item) => {
          item.url = `/search/${item.type}?keyword=${this.keyword}`;
        });
      },
    },
  },
};
</script>

<style lang='less'>
#search {
  padding: 20px;
  .head-line {
    font-weight: bold;
    font-size: 22px;
    .keyword {
      color: var(--themeColor1);
    }
  }
  .nav-bar {
    .nav-box {
      justify-content: left;
    }
  }
}
</style>